<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Props</title>
</head>
<body>
<div id="example">
    <input v-model="parentMsg">
    <child :my-message.sync="parentMsg"></child>
    <!-- Props绑定类型-->
    <!-- 默认为单向绑定-->
    <child v-bind:msg="parentMsg"></child>
    <!-- 双向绑定-->
    <child :msg.sync="parentMsg"></child>
    <!-- 单次绑定-->
    <child :msg.once="parentMsg"></child>
</div>
<script src="../js/vue.js"></script>
<script>
    <!-- HTML 特性不区分大小写。名字形式为 camelCase 的 prop 用作特性时，需要转为 kebab-case（短横线隔开）-->
    Vue.component('child', {
        props: ['myMessage'],
        template: '<span>{{myMessage}}</span>'
    });
    new Vue({
        el: '#example',
        data: {
            parentMsg: ''
        }
    });
</script>
</body>
</html>